<template>
  <div class="accountManage-page">
    <h3>账号管理</h3>
    <AreaWarp :padding="true">
      <SearchWarp :label="'用户名'">
        <el-input v-model.trim="searchInfo.loginName" placeholder="用户名"></el-input>
      </SearchWarp>
      <SearchWarp :label="'部门'">
        <el-input v-model.trim="searchInfo.department" placeholder="部门"></el-input>
      </SearchWarp>
      <SearchWarp :label="'角色'">
        <el-input v-model.trim="searchInfo.roleName" placeholder="角色"></el-input>
      </SearchWarp>
      <BtnWarp>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>

    <AreaTitleWarp :title="'账号列表'">
      <el-button v-if="addShow" type="primary" @click="edit('1')">新增账号</el-button>
    </AreaTitleWarp>

    <!--搜索结果区域-->
    <AreaWarp :padding="false">
      <el-table
        size="mini"
        :data="tableInfo.list"
        style="width: 100%"
        class="pub-table"
        header-row-class-name="pub-table-header-row"
        header-cell-class-name="pub-table-header-cell"
        tooltip-effect="dark"
      >
        <el-table-column prop="loginName" label="用户名"></el-table-column>
        <el-table-column prop="nickname" label="姓名"></el-table-column>
        <el-table-column prop="department" label="部门"></el-table-column>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="isValid" label="状态" :formatter="filter_status"></el-table-column>
        <el-table-column
          prop="addTime"
          label="创建时间"
          min-width="150"
          :formatter="formatter_timeYMDHM"
        ></el-table-column>
        <el-table-column v-if="editShow" prop="roleId" label="修改">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">修改</el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="modifyShow" prop="roleId" label="重置密码">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="modifyPassword(scope.row)">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total,sizes,prev, pager, next"
        class="pub-page"
        :current-page="searchInfo.page"
        :page-sizes="[20,50,100]"
        :page-size="searchInfo.size"
        :total="tableInfo.total"
        @current-change="search"
        @size-change="handleSizeChange"
      ></el-pagination>
    </AreaWarp>

    <el-dialog
      title="重置密码"
      :visible.sync="dialogVisible"
      width="30%"
      :close="modifyCancel"
      :close-on-click-modal="false"
    >
      <li>
        <span class="span1">用户名:</span>
        <span class="span2">
          <el-input v-model="editInfo.loginName" disabled></el-input>
        </span>
      </li>
      <li>
        <span class="span1">姓名:</span>
        <span class="span2">
          <el-input v-model="editInfo.nickname" disabled></el-input>
        </span>
      </li>
      <li>
        <span class="span1">密码:</span>
        <span class="span2">
          <el-input v-model="editInfo.newPassword" type="password" placeholder="请输入密码"></el-input>
        </span>
      </li>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyCancel">取 消</el-button>
        <el-button type="primary" @click="modifySure">确 定</el-button>
      </span>
    </el-dialog>

    <accountEdit :message="message" :flag="flag" v-if="editVisible" @accountEdit="accountEdit"></accountEdit>
  </div>
</template>
<script>
import System from "../../../assets/js/system.js";
import md5 from "md5";
import accountEdit from "./accountEdit";
export default {
  components: {
    accountEdit
  },
  data() {
    return {
      searchInfo: {
        loginName: "",
        department: "",
        roleName: "",
        page: 1,
        size: 20
      },
      loading: false,
      tableInfo: {
        list: [],
        total: 0
      },
      dialogVisible: false,
      editInfo: {},
      editVisible: false,
      message: null,
      flag: 1,
      addShow: false,
      editShow: false,
      modifyShow: false
    };
  },
  methods: {
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;
      let x = {
        loginName: that.searchInfo.loginName,
        department: that.searchInfo.department,
        roleName: that.searchInfo.roleName,
        size: that.searchInfo.size,
        page: that.searchInfo.page
      };

      let system = new System(x);
      let reqData = system.getState();

      if (reqData.code) {
        that.showMsg(reqData.message, "error");
        return;
      }

      that.loading = true;
      that.ajaxJson({
        url: "/system/account/list",
        data: reqData,
        success: function(res) {
          if (res.code == "0") {
            that.tableInfo = res.data;
          }
          that.loading = false;
        }
      });
    },
    reset() {
      let that = this;
      (that.searchInfo = {
        loginName: "",
        department: "",
        roleName: "",
        page: 1,
        size: 20
      }),
        (that.tableInfo = {
          list: [],
          total: 0
        });
      that.search();
    },
    filter_status(row, column, cellValue, index) {
      switch (cellValue) {
        case "0":
        case 0:
          return "禁用";
        case 1:
          return "启用";
      }
    },
    modifyPassword(row) {
      let that = this;
      that.dialogVisible = true;
      that.editInfo = {
        userId: row.id,
        loginName: row.loginName,
        nickname: row.nickname
      };
    },
    modifySure() {
      let that = this;
      if (!that.editInfo.loginName) {
        that.showMsg("请输入用户名", "error");
        return;
      }
      if (!that.editInfo.nickname) {
        that.showMsg("请输入姓名", "error");
        return;
      }
      if (!that.editInfo.newPassword) {
        that.showMsg("请输入新密码", "error");
        return;
      }
      that.ajaxJson({
        url: "/system/account/resetPassword",
        data: {
          userId: that.editInfo.userId,
          userLoginName: that.editInfo.loginName,
          newPassword: md5(that.editInfo.newPassword)
        },
        success: function(res) {
          if (res.code == 0) {
            that.dialogVisible = false;
            that.showMsg("密码重置成功", "success");
          } else {
            that.showMsg(res.message, "error");
          }
          that.modifyCancel();
        }
      });
    },
    modifyCancel() {
      let that = this;
      that.editInfo = {
        loginName: "",
        nickname: "",
        newPassword: ""
      };
      that.dialogVisible = false;
    },
    edit(row) {
      let that = this;
      if (row == "1") {
        that.message = null;
        that.flag = 1;
      } else {
        that.flag = 2;
        that.message = {
          id: row.id,
          loginName: row.loginName,
          nickname: row.nickname,
          department: row.department,
          roleId: row.roleId,
          isValid: row.isValid
        };
        that.message.isValid = row.isValid.toString() || 0;
      }
      that.editVisible = true;
    },
    accountEdit(row) {
      let that = this;
      that.message = null;
      that.editVisible = false;
      that.search();
    },
    //新增按钮显示判断
    isAddShow() {
      let that = this;
      let isAddShow = that.urlPermissions().indexOf("/system/account/new");
      if (isAddShow == "-1") {
        that.addShow = false;
      } else {
        that.addShow = true;
      }
    },
    //修改按钮显示判断
    isEditShow() {
      let that = this;
      let isEditShow = that.urlPermissions().indexOf("/system/account/edit");
      if (isEditShow == "-1") {
        that.editShow = false;
      } else {
        that.editShow = true;
      }
    },
    //重置密码按钮显示判断
    isModifyShow() {
      let that = this;
      let isModifyShow = that
        .urlPermissions()
        .indexOf("/system/account/resetPassword");
      if (isModifyShow == "-1") {
        that.modifyShow = false;
      } else {
        that.modifyShow = true;
      }
    }
  },
  created() {
    let that = this;
    Promise.all([
      that.isAddShow(),
      that.isEditShow(),
      that.isModifyShow()
    ]).then(arr => {
      that.search();
    });
  }
};
</script>
<style lang="less">
.accountManage-page {
}
</style>
